<!-- 部门树节点组件 -->
<template id="deptNode">
  <view class="dept-node">
    <view class="dept-header">
      <view class="indent" :style="{ width: level * 20 + 'rpx' }"></view>
      <view class="expand-icon" v-if="dept.children && dept.children.length > 0" @click.stop="toggleExpand">
        <uni-icons :type="expanded ? 'down' : 'arrowright'" size="20" color="#909399"></uni-icons>
      </view>
      <view class="dept-info" @click="openModal('edit', dept)">
        <text class="dept-name">{{ dept.dept_name }}</text>
        <text class="dept-status" :class="{ 'status-active': dept.status === '0', 'status-inactive': dept.status === '1' }">
          {{ dept.status === '0' ? '启用' : '禁用' }}
        </text>
      </view>
      <view class="dept-actions" v-if="level != 0">
        <button class="action-btn small edit-btn" @click.stop="editDept(dept)">
          <u-icon name="edit-pen" color="#409EFF" size="36" class="action-icon"></u-icon>
        </button>
        <button class="action-btn small delete-btn" @click.stop="deleteDept(dept)">
          <uni-icons type="trash" size="16" color="#F56C6C"></uni-icons>
        </button>
      </view>
    </view>
    <view class="dept-children" v-if="expanded && dept.children && dept.children.length > 0">
		 
	  <view class="dept-node" v-for="(child,index1) in dept.children" 
        :key="child.dept_id" >
	      <view class="dept-header">
			  
	        <view class="indent" :style="{ width: level+1 * 20 + 'rpx' }"></view>
			 <view class="expand-icon" v-if="child.children && child.children.length > 0" @click.stop="toggleExpand1">
			   <uni-icons :type="expanded1 ? 'down' : 'arrowright'" size="20" color="#909399"></uni-icons>
			 </view>
	        <view class="dept-info" @click="openModal('edit', child)">
	          <text class="dept-name">{{ child.dept_name }}</text>
	          <text class="dept-status" :class="{ 'status-active': child.status === '0', 'status-inactive': dept.status === '1' }">
	            {{ child.status === '0' ? '启用' : '禁用' }}
	          </text>
	        </view>
	        <view class="dept-actions">
	          <button class="action-btn small edit-btn" @click.stop="editDept1(index1)">
	            <u-icon name="edit-pen" color="#409EFF" size="36" class="action-icon"></u-icon>
	          </button>
	          <button class="action-btn small delete-btn" @click.stop="deleteDept1(index1)">
	            <uni-icons type="trash" size="16" color="#F56C6C"></uni-icons>
	          </button>
	        </view>
	      </view>
		  <view class="dept-children" v-if="expanded1 && child.children && child.children.length > 0">
		  	 
		    <view class="dept-node" v-for="(item,index2) in child.children" 
		      :key="item.dept_id" >
		        <view class="dept-header">
		  		  
		          <view class="indent" :style="{ width: level+2 * 20 + 'rpx' }"></view>
		  		 <view class="expand-icon" v-if="item.children && item.children.length > 0" @click.stop="toggleExpand2">
		  		   <uni-icons :type="expanded1 ? 'down' : 'arrowright'" size="20" color="#909399"></uni-icons>
		  		 </view>
		          <view class="dept-info" @click="openModal('edit', item)">
		            <text class="dept-name">{{ item.dept_name }}</text>
		            <text class="dept-status" :class="{ 'status-active': item.status === '0', 'status-inactive': item.status === '1' }">
		              {{ item.status === '0' ? '启用' : '禁用' }}
		            </text>
		          </view>
		          <view class="dept-actions">
		            <button class="action-btn small edit-btn" @click.stop="editDept2(index1,index2)">
		              <u-icon name="edit-pen" color="#409EFF" size="36" class="action-icon"></u-icon>
		            </button>
		            <button class="action-btn small delete-btn" @click.stop="deleteDept2(index1,index2)">
		              <uni-icons type="trash" size="16" color="#F56C6C"></uni-icons>
		            </button>
		          </view>
		        </view>
		  	</view>
		  </view>
		</view>
		
	 <!-- <deptNode 
        v-for="child in dept.children" 
        :key="child.dept_id" 
        :dept="child" 
        :level="level + 1"
        @edit="editDept"
        @delete="deleteDept"
      ></deptNode> -->
	  
    </view>
  </view>
</template>

<script>
	
	export default {
		name:"deptNode",
		props: ['dept', 'level'],
		data() {
			return {
				expanded: true,
				expanded1:false,
				two:0,
				three:0
			};
		},
		methods: {
		    toggleExpand() {
		      this.expanded = !this.expanded;
		    },
			toggleExpand1() {
			  this.expanded1 = !this.expanded1;
			},
		    editDept(index) {
				console.log('8888',this.dept,'97979',index)
		      this.$emit('edit', index);
		    },
			editDept1(index) {
				console.log('8888',this.dept,'97979',index)
			  this.two = index
			  this.$emit('edit', this.dept.children[index],this.dept);
			},
			editDept2(index1,index2) {
			  this.$emit('edit', this.dept.children[index1].children[index2],this.dept.children[index1]);
			},
		    deleteDept(dept) {
		      this.$emit('delete', dept);
		    },
			deleteDept1(index) {
			  this.$emit('delete', this.dept.children[index]);
			},
			deleteDept2(index1,index2) {
				console.log('dadadasdasdadasdas',this.dept.children[index1].children[index2])
			  this.$emit('delete', this.dept.children[index1].children[index2]);
			},
			openModal(){
				
			},
		},
	}
</script>

<style>
.dept-tree {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 20rpx;
}

.dept-node {
  border-bottom: 1rpx solid #f5f5f5;
}

.dept-header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  cursor: pointer;
}

.indent {
  height: 1rpx;
}

.expand-icon {
  width: 40rpx;
  display: flex;
  justify-content: center;
}

.dept-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.dept-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #303133;
}

.dept-status {
  font-size: 24rpx;
  margin-left: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.status-active {
  color: #67c23a;
  background-color: rgba(103, 194, 58, 0.1);
}

.status-inactive {
  color: #e6a23c;
  background-color: rgba(230, 162, 60, 0.1);
}

.dept-actions {
  display: flex;
  align-items: center;
}

.dept-children {
  padding-left: 40rpx;
}
</style>